<!--幼儿园教职工管理-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          class="top"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :permission="permissionList"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @selection-change="selectionChange"
          @row-del="handleDel">
        <template slot="grouplist" slot-scope="scope">
              <span
                  v-for="(grouplist,index) in scope.row.group"
                  :key="index">
                   <el-tag>{{ grouplist.groupName }} </el-tag>
              </span>
          <span v-if="scope.row.group === null">未设置</span>
        </template>
        <template slot="property" slot-scope="scope">
          <el-tag>{{ scope.label }}</el-tag>
        </template>
        <template slot="deptName" slot-scope="scope">
          <p>{{scope.row.campusDeptArea}}{{scope.row.parentName}}{{scope.row.deptName}}</p>
        </template>
        <template slot="phone" slot-scope="scope">
          <p style="margin: 0" v-if="scope.row.eye === false">{{scope.row.phone}}
            <i class="icon-huabanfuben" style="margin:0 0 0 5px;font-size: 15px!important;" @click="showPhone(scope)"/>
          </p>
          <p style="margin: 0" v-if="scope.row.eye === true">{{scope.row.phone1}}
            <i class="icon-yanjing1" style="margin:0 0 0 5px;font-size: 14px!important;" @click="showPhone(scope)"/>
          </p>
        </template>
        <template slot="identityId" slot-scope="scope">
          <p style="margin: 0" v-if="scope.row.identity === false && scope.row.identityId !== null">{{scope.row.identityId}}
            <i class="icon-huabanfuben" style="margin:0 0 0 5px;font-size: 15px!important;" @click="showIdentity(scope)"/>
          </p>
          <p style="margin: 0" v-if="scope.row.identity === true && scope.row.identityId !== null">{{scope.row.identityId1}}
            <i class="icon-yanjing1" style="margin:0 0 0 5px;font-size: 14px!important;" @click="showIdentity(scope)"/>
          </p>
          <p style="margin: 0" v-if="scope.row.identityId == null">无</p>
        </template>
        <template v-if="scope.row.qrcode" slot="code" slot-scope="scope">
                    <span
                        v-for="(code,index) in scope.row.qrcode"
                        :key="index">
                         <el-tag>{{ code }} </el-tag>
                    </span>
          <span v-if="scope.row.qrcode.length == 0">未设置</span>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
              class="filter-item"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handleEditItem(scope.row)">编辑
          </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDel(scope.row)">删除
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="handleItem()">新增
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-upload2"
              size="small"
              type="success"
              @click="importItemVisible">导入
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-download"
              size="small"
              type="warning"
              @click="exportItemVisible()">导出
          </el-button>
        </template>
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="batchDelVisible()">批量删除
          </el-button>
        </template>
      </avue-crud>
      <!--导入弹窗-->
      <el-dialog
          :visible.sync="setItemVisible"
          title="导入"
          center
          style="position: absolute"
          :close-on-click-modal="false"
          width="40%" @close="dictImportVisible">
        <el-form :model="form">
          <div class="upload-border" style="text-align: center">
            <el-form-item>
              <el-upload
                  ref="upload"
                  :auto-upload="false"
                  :before-upload="beforeUploadFile"
                  :file-list="fileList"
                  :http-request="handleupload"
                  :limit=limitNum
                  :on-change="handleChange"
                  :on-exceed="exceedFile"
                  accept=".xlsx"
                  action=""
                  drag>
                <!--                <el-button slot="trigger" style="margin-left: 0" type="success">导入文件</el-button>-->
                <i class="icon-yun-shangchuan"
                   style="font-size: 67px!important;color:#409EFF;position: relative;top:50px"></i>
                <div class="el-upload__text" style="position: relative;top:50px">点击此区域选择文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item style="text-align: center;margin-bottom: 0">
              <el-button @click="uploadItemVisible()">上传文件</el-button>
            </el-form-item>
            <el-form-item>
              <h4 style="display: inline-block;margin: 5px 0">
                提示：导入文件必须为Excel格式，您可以先
              </h4>
              <el-button
                  class="filter-item"
                  icon="el-icon-download"
                  size="small"
                  style="font-size: 15px;"
                  type="text"
                  @click="exportTempVisible">下载教职工信息模板
              </el-button>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer">
        </div>
      </el-dialog>
      <!--人员新增-->
      <el-dialog
          :visible.sync="dialogAddVisible"
          center
          title="新增"
          :close-on-click-modal="false"
          width="40%" @close="dictItemVisible">
        <el-form>
          <avue-form v-model="addform" :data="addData" :option="addOption" style="display: inline-block;width: 100%"></avue-form>
        </el-form>
        <div slot="footer">
          <el-button type="default" @click="dictItemVisible">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </div>
      </el-dialog>
      <!--人员编辑-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          center
          title="编辑"
          :close-on-click-modal="false"
          width="40%" @close="dictItemEditVisible">
        <el-form>
          <avue-form v-model="editform" :data="editData" :option="editOption" style="display: inline-block;width: 100%"></avue-form>
        </el-form>
        <div slot="footer">
          <el-button type="default" @click="dictItemEditVisible">取消</el-button>
          <el-button type="primary" @click="handleEditSave">确定</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {addPerson, delIdsObj, delStudent, editPerson, personList} from '@/api/people/person'
import {addOption, editOption} from '@/const/crud/people/childTeacher'
import {mapGetters} from 'vuex'
import store from "@/store";
import Vue from 'vue';
import {addQrcode,editCode,qrcode} from '@/api/people/student'
import {PERSON_DETAILS, PERSON_IDS, PERSON_OPERA, STUDENT_SEX} from '@/const/personDict'

export default {
  name: 'childTeacher',
  components: {
  },
  data() {
    return {
      phone:'',  //已打码手机号
      phone1:'', //未打码手机号
      identityId:'',  //已打码身份证
      identityId1:'', //未打码身份证
      tableData: [],
      group: [],
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      addOption: addOption,
      editOption: editOption,
      dialogAddVisible: false,
      dialogEditVisible: false,
      setItemVisible: false,
      addData: [],
      editData: [],
      chooseList: [],
      addform: {},
      editform: {},
      headers: {
        Authorization: "Bearer " + store.getters.access_token,
      },
      limitNum: 1,
      fileList: [],
      form: {},
      loading: false,
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        searchLabelWidth: 86,
        menuAlign: 'center',
        menuWidth: 180,
        menuType: 'button',
        align: 'center',
        showClomnuBtn: false,
        searchSize: 'mini',
        searchMenuSpan: 6,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: true,
        reserveSelection: true,
        dialogFullscreen: true,
        refreshBtn: false,  //表格上面小的 刷新按钮
        columnBtn: false,  //表格上面小的 列表显隐按钮
        props: {
          label: 'label',
          value: 'value'
        },
        column: [{
          label: '人员id',
          prop: 'id',
          hide: true,
          viewDisplay: false,
          editDisplay: false,
        }, {
          label: '姓名',
          prop: 'name',
          type: 'input',
          search: true,
        }, {
          label: '工号',
          prop: 'number',
          dicData: PERSON_DETAILS
        }, {
          label: '性别',
          prop: 'sex',
          search: true,
          type: 'select',
          dicData: STUDENT_SEX,
          change: (value) => {
            this.searchForm.sex = value.value
            this.getList(this.page, this.searchForm)
          },
        }, {
          label: '单位',
          prop: 'deptName',
          type: 'select',
          slot:true,
          dicData: PERSON_DETAILS,
          editDisplay: false,
        }, {
          label: '身份',
          prop: 'identityKey',
          search: true,
          type: 'select',
          dicUrl: '/campus/identity/selectAll?groupNum=1',
          dicMethod: 'get',
          props: {
            label: 'name',
            value: 'id'
          },
          change: (value) => {
            this.searchForm.identityKey = value.value
            this.getList(this.page, this.searchForm)
          },
        }, {
          label: '手机号',
          prop: 'phone',
          slot: true, //加隐藏显示手机号
          viewDisplay: true,
        },{
          label: '身份证号',
          prop: 'identityId',
          dicData: PERSON_DETAILS,
          width: 165,
          slot: true, //加隐藏显示身份证号
        },
          {
            label: '卡号',
            prop: 'code',
            slot: true

          },
          {
          label: '可通行门禁',
          prop: 'grouplist',
          hide: true,
          slot: true,
        },
          {
          label: '人员修改时间',
          prop: 'updateTime',
          type: 'datetime',
          format: 'yyyy-MM-dd HH:mm',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          editDisplay: false,
        }, {
          label: '修改操作人',
          prop: 'operator',
          editDisplay: false,
          dicData: PERSON_OPERA,
        }, {
            label: '单位',
            prop: 'deptId',
            search: true,
            filter: false,
            type: 'tree',
            hide: true,
            dicUrl: '/admin/dept/PermissionTree',
            dicMethod: 'get',
            dicFormatter: (res) => {
              let arr1 = res.data
              let value = []
              let arr = arr1.filter(item => item.isLock != true )
              let a = Math.min.apply(Math, arr.map((item, index) => {
                return item.parentId
              }))
              function transTreeData(items){
                if(items.length>0){
                  var curPid = a //pid=0，为最上层节点 ，即无父节点
                  var parent=findChild(curPid);//数组
                  return parent;
                }else{
                  return [];
                }
              }
              function findChild (curPid){
                var _arr = [];
                var items= arr;
                var length=items.length;
                for(var i = 0; i < length; i++){
                  if(items[i].parentId == curPid){
                    var _obj = items[i];
                    _obj.children = findChild(_obj.id);
                    _arr.push(_obj);
                  }
                }
                console.log(_arr)
                return _arr;
              }
              value = transTreeData(arr)
              return value
            },
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },

          },{
            label: '有无身份证',
            prop: 'identityIdIsNull',
            dicData: PERSON_IDS,
            hide:true,
            search: true,
            type: 'select',
            slot: true,
            change: (value) => {
              this.searchForm.identityIdIsNull = value.value
              this.getList(this.page, this.searchForm)
            },
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        delBtn: this.vaildData(this.permissions.sys_log_del, true)
      }
    },
  },
  methods: {
    //显示隐藏手机号
    showPhone(scope){
      if(scope.row.eye === false){
        scope.row.eye = true
      }else if(scope.row.eye === true){
        scope.row.eye = false
      }
    },

    //显示隐藏身份证号
    showIdentity(scope){
      if(scope.row.identity === false){
        scope.row.identity = true
      }else if(scope.row.identity === true){
        scope.row.identity = false
      }
    },

    //展示表格
    getList(page, params, row) {
      this.tableLoading = true
      personList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        for(var i=0; i<response.data.data.records.length; i++) {
          let phone = response.data.data.records[i].phone
          if (phone !== null) {
            let newphone = phone.replace(/^(.{3})(?:\d+)(.{4})$/,"\$1****\$2");  //手机号打码正则
            response.data.data.records[i].phone = newphone  //已打码手机号
            response.data.data.records[i].phone1 = phone   //未打码手机号
          }

          let identityId = response.data.data.records[i].identityId
          if (identityId !== null) {
            let newIdentityId = identityId.replace(/^(.{6})(?:\d+)(.{4})$/,"\$1********\$2");  //身份证号打码正则
            response.data.data.records[i].identityId = newIdentityId  //已打码身份证号
            response.data.data.records[i].identityId1 = identityId  //未打码身份证号
          }
        }
        this.tableData.map(item => {
          this.$set(item, 'eye')
          item.eye = false
        })
        this.tableData.map(item => {
          this.$set(item,'identity')
          item.identity  = false
        })
        this.page.total = response.data.data.total
        this.tableData.map(item => {
          qrcode(item.id).then(res => {
            if (res.data.code === 0) {
              this.$set(item, 'qrcode',)
              item.qrcode = res.data.data
            }
          })
        })
        this.tableLoading = false
      })
    },

    //新增弹窗相关
    handleItem: function () {
      this.addform.name = null
      this.addform.deptId = ''
      this.addform.identityKey = null
      this.addform.identityId = null
      this.addform.sex = null
      this.addform.phone = null
      this.addform.number = null
      this.addform.accessControlIds = null
      this.addform.cardIds = null
      this.dialogAddVisible = true
      // for (let key of Object.keys(this.addform)) {
      //   Vue.delete(this.addform, key);
      // }
    },

    //新增弹窗关闭
    dictItemVisible: function () {
      this.dialogAddVisible = false
      this.addform.name = null
      this.addform.deptId = ''
      this.addform.identityKey = null
      this.addform.identityId = null
      this.addform.sex = null
      this.addform.phone = null
      this.addform.cardIds = null
      this.addform.number = null
      this.addform.accessControlIds = null
      // for (let key of Object.keys(this.addform)) {
      //   Vue.delete(this.addform, key);
      // }
    },

    //新增提交
    handleSave: function (row) {
      if (this.addform.name == ''|| this.addform.name == null){
        this.$message.error("请输入姓名")
        return
      }else{
        this.addform.name = this.addform.name.trim()
      }
      if (this.addform.deptId == null){
        this.$message.error("请选择所在单位")
        return
      }
      if (this.addform.identityKey == null){
        this.$message.error("请选择身份")
        return
      }
      if (this.addform.identityId == null){
        this.$message.error("请输入身份证号")
        return
      }
      let Id = /(^\d{17}(\d|X|x)$)/
      if (!Id.test(this.addform.identityId)){
        this.$message.error("请输入正确的身份证号")
        return
      }
      if (this.addform.sex == null){
        this.$message.error("请选择性别")
        return
      }
      let acount = /^[1][0-9][0-9]{9}$/
      if (this.addform.phone.length !== 11 ||!acount.test(this.addform.phone)){
        this.$message.error("请输入正确手机号")
        return
      }
      let loading = this.$loading({
        lock: true,
        text: '添加中，请稍等',
      })
      addPerson(this.addform).then(res => {
        if (res.data.code === 0) {
          let grouparr = this.addform.cardIds
          console.log(grouparr)
          let personId = res.data.data
          if (grouparr.length > 0) {
            let arr = []
            for (var i = 0; i < grouparr.length; i++) {
              if (grouparr[i] == '') {        //判断不填卡号时空字符串
                grouparr.splice(i, 1);
                i = i - 1;
              } else {
                var j = {}
                j.cardId = grouparr[i]
                j.personId = personId
                arr.push(j)
              }
            }
            addQrcode(arr).then(res => {
              if (res.data.code === 1) {
                this.$message.error('人员添加成功，卡编号写入失败')
              }
            })
          }
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
        this.addform.name = null
        this.addform.deptId = null
        this.addform.identityKey = null
        this.addform.identityId = null
        this.addform.sex = null
        this.addform.phone = null
        this.addform.number = null
        this.addform.accessControlIds = null
        this.dialogAddVisible = false
        loading.close()
        // for (let key of Object.keys(this.addform)) {
        //   Vue.delete(this.addform, key);
        // }
        this.getList(this.page)
        this.addform = {}
        console.log(row)
      })
        .catch(err => {
            loading.close()
            this.$message.error("添加失败");
          });
    },

    //导入弹窗
    importItemVisible() {
      this.setItemVisible = true
    },

    //导入模板下载
    exportTempVisible() {
      axios({
        method: 'get',
        url: '/campus/persons/NSexcel_template',
        params: this.searchForm,
        headers: {
          key: ''
        },
        responseType: "blob"
      })
          .then(res => {
            if (res.data.type) {
              // 文件下载
              const blob = new Blob([res.data], {
                type: "application/vnd.ms-excel"
              });
              let link = document.createElement('a');
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '导入教职工信息模板.xlsx');
              link.click();
              link = null;
              this.$message.success('下载成功');
            } else {
              // 返回json
              this.$message.warning(res.data.msg);
            }
          })
          .catch(err => {
            this.$message.error("下载失败");
          });
    },

    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: '警告',
        message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
      });
    },

    // 文件状态改变时的钩子
    handleChange(file, fileList) {
      console.log('change')
      console.log(file)
      this.form.file = file.raw
      console.log(this.form.file)
      console.log(fileList)
    },

    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log('before upload')
      console.log(file)
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      let size = file.size / 1024 / 1024
      if (extension !== 'xlsx') {
        this.$notify.warning({
          title: '警告',
          message: `只能上传Excel2017（即后缀是.xlsx）的文件`
        });
      }
      if (size > 10) {
        this.$notify.warning({
          title: '警告',
          message: `文件大小不得超过10M`
        });
      }
    },

    //文件上传执行
    handleupload() {
      const data = new FormData()
      const fileUps = this.form.file
      data.append('file', fileUps)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍等'
      })
      this.$axios({
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        url: '/campus/persons/NSexcel_Import',
        data: data,
        method: 'post',
        timeout: 600000,
      }).then(res => {
        if (res.data === "success") {
          loading.close()
          this.$message.success('文件上传成功')
          console.log(this.$message)
        } else {
          loading.close()
          this.$message.error('文件上传失败')
        }
        this.$refs['upload'].clearFiles();
        this.setItemVisible = false
        loading.close()
        this.getList(this.page)
      })
        .catch(err => {
            loading.close()
            this.$message.error("文件上传失败");
        });
    },

    //上传文件提交
    uploadItemVisible() {
      if (this.$refs.upload.uploadFiles.length < 1) {
        this.$message.warning('请选择上传文件')
        console.log(this.$refs.upload.uploadFiles)
      } else {
        this.$refs.upload.submit()
      }
    },

    //关闭导入弹窗
    dictImportVisible() {
      this.setItemVisible = false
      this.$refs['upload'].clearFiles();
    },

    //导出文件
    exportItemVisible() {
      const h = this.$createElement
      this.$confirm('确定要导出当前筛选条件下的人员吗?', '导出excel', {
        message: h('p', null, [
          h('h3', {style: 'font-weight:bold;'}, '确定要导出当前筛选条件下的人员吗?'),
          h('p', {style: 'color:red'}, '导出文件需要较长时间，请耐心等待'),
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false,
      }).then(() => {
        let loading = this.$loading({
          lock: true,
          text: '导出中，请稍等'
        })
        axios({
          method: 'get',
          url: '/campus/persons/NSexcel_export',
          params: this.searchForm,
          timeout: 600000,
          headers: {
            key: ''
          },
          responseType: "blob"
        }).then(res => {
          if (res.data.type) {
            // 文件下载
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', '教职工信息导出文件.xlsx');
            link.click();
            link = null;
            loading.close()
            this.$message.success('导出成功');
          } else {
            // 返回json
            this.$message.warning(res.data.msg);
          }
        })
            .catch(err => {
              loading.close()
              this.$message.error("下载失败");
            });
      })
    },

    //批量删除
    batchDelVisible: function () {
      let ids = this.chooseList.map(x => {
        return x.id
      })
      console.log(ids)
      if (ids.length === 0) {
        this.$message.error('请选择批量要删除的人员')
      } else {
        this.$confirm('是否确认删除所选人员?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal:false,
        }).then(function () {
          return delIdsObj(ids)
        }).then(res => {
          if (res.data.code === 0) {
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
          this.dialogbetchDelVisible = false
          this.getList(this.page)
        })
      }
    },

    // 表格的多选方法
    selectionChange(list) {
      // this.$message.success('选中的数据'+ JSON.stringify(list));
      this.chooseList = list
    },

    //编辑弹窗相关
    handleEditItem: function (row) {
      this.dialogEditVisible = true
      this.editform = row
      // 获取门禁组
      if (row.group !== null) {
        this.editform.accessControlIds = row.group.map(x => {
          return x.id
        })
      }
    },

    //编辑提交
    handleEditSave: function () {
      if (this.editform.name == ''|| this.editform.name == null){
        this.$message.error("请输入姓名")
        return
      }else{
        this.editform.name = this.editform.name.trim()
      }
      if (this.editform.deptId == null){
        this.$message.error("请选择所在单位")
        return
      }
      if (this.editform.identityKey == null){
        this.$message.error("请选择身份")
        return
      }
      if (this.editform.identityId1 == null){
        this.$message.error("请输入身份证号")
        return
      }
      let Id = /(^\d{17}(\d|X|x)$)/
      if (!Id.test(this.editform.identityId1)){
        this.$message.error("请输入正确的身份证号")
        return
      }
      if (this.editform.sex == null){
        this.$message.error("请选择性别")
        return
      }
      if (this.editform.phone1.length !== 11){
        this.$message.error("请输入正确手机号")
        return
      }
      let loading = this.$loading({
        lock: true,
        text: '修改中，请稍等'
      })
      this.editform.phone = this.editform.phone1
      this.editform.identityId = this.editform.identityId1
      editPerson(this.editform).then(res => {
        if (res.data.code === 0) {
          let grouparr = this.editform.qrcode
          if (grouparr.length > 0) {
            let arr = []
            for (var i = 0; i < grouparr.length; i++) {
              if (grouparr[i] == '') {        //判断不填卡号时空字符串
                grouparr.splice(i, 1);
                i = i - 1;
              }
              var j = {}
              j.cardId = grouparr[i]
              j.personId = this.editform.id
              arr.push(j)
            }
            editCode(arr).then(res => {
              if (res.data.code === 0) {
                this.$message.success('修改成功')
              } else {
                this.$message.error('修改失败')
              }
            })
          }
        }else{
          this.$message.error('修改失败')
        }
        this.dialogEditVisible = false
        loading.close()
        this.getList(this.page)
        for (let key of Object.keys(this.editform)) {
          Vue.delete(this.editform, key);
        }
      })
        .catch(err => {
            loading.close()
            this.$message.error("修改失败");
        });
    },

    //编辑弹窗关闭
    dictItemEditVisible: function () {
      this.dialogEditVisible = false
      for (let key of Object.keys(this.editform)) {
        Vue.delete(this.editform, key);
      }
    },

    //删除
    handleDel: function (row) {
      this.$confirm('是否确认删除"' + row.name + '"?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal:false,
      }).then(function () {
        return delStudent(row.id)
      }).then(() => {
        this.getList(this.page)
        this.$message.success('删除成功')
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },

    //清空时重置页面
    searchReset() {
      this.searchForm = {};
      this.getList(this.page)
    },

  }
}
</script>
<style>
.avue-crud__right{
  display: none!important;
}
</style>
<style scoped>
/deep/.top .el-form-item__label{
  text-align: left;
}

/*搜索框的左右padding*/
/deep/ .top .avue-form__row {
  padding-left: 4px !important;
  padding-right: 36px !important;
}

/*搜索和清空的左对齐*/
/deep/ .avue-form__menu--center {
  text-align: left;
}

.upload-border {
  width: 70%;
  height: 280px;
  margin: 0 auto;
  /*border: dashed 3px  #409EFF;*/
}

/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 0;
}

/deep/ .el-upload-list__item-name {
  margin: 0 0 10px 0;
  padding-left: 0;
}

/deep/ .el-upload-list__item:first-child {
  margin: 0;
}

/deep/ .el-upload-dragger {
  width: 420px;
}
</style>
